<template>
  <div class="demo">
    <div class="demo-title">前置/后置标签</div>
    <div class="demo-content">
      <Space direction="vertical">
        <Input v-model:value="value1" addon-before="Http://" addon-after=".com" />
        <Input v-model:value="value2">
          <template #addonBefore>
            <Select v-model:value="value3" style="width: 90px">
              <Select.Option value="Http://">Http://</Select.Option>
              <Select.Option value="Https://">Https://</Select.Option>
            </Select>
          </template>
          <template #addonAfter>
            <Select v-model:value="value4" style="width: 80px">
              <Select.Option value=".com">.com</Select.Option>
              <Select.Option value=".jp">.jp</Select.Option>
              <Select.Option value=".cn">.cn</Select.Option>
              <Select.Option value=".org">.org</Select.Option>
            </Select>
          </template>
        </Input>
        <Input v-model:value="value5">
          <template #addonAfter>
            <SettingOutlined />
          </template>
        </Input>
        <Input v-model:value="value6">
          <template #addonBefore>
            <Cascader placeholder="cascader" style="width: 150px" />
          </template>
        </Input>
      </Space>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue';
  import { SettingOutlined } from '@ant-design/icons-vue';
  import Cascader from '@sscd/cascader';
  import Select from '@sscd/select';
  import Space from '@sscd/space';
  import Input from '@sscd/input';
  const value1 = ref<string>('mysite');
  const value2 = ref<string>('mysite');
  const value3 = ref<string>('Http://');
  const value4 = ref<string>('.com');
  const value5 = ref<string>('mysite');
  const value6 = ref<string>('mysite');
</script>

<style lang="less" scoped></style>
